<template>
  <!-- 搜索坐落弹窗 -->
  <base-paenl class="grid-information-dialog" id="floorSiteDialog">
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'floorSiteDialog', 100, 600)"
    >
      {{ title }}
    </div>
    <div slot="main" class="slot-main">
      <div class="search">
        搜索坐落
        <el-input
          size="mini"
          v-model="searchVal"
          placeholder="输入地址关键字搜索"
          class="search-input"
        ></el-input>
        <div class="search-btn" @click="searchFloorName()">查询</div>
      </div>
      <div v-for="(item, index) of secondType" :key="index">
        <div
          v-if="Object.keys(secondType).length > 1"
          class="dialog-content-second"
        >
          <img
            src="../../assets/images/dialogs/tanchuangcibiaotixiaosanjiao.png"
            width="9px"
            height="12px"
            style="margin: 0 10px"
          />{{ item.name }}
        </div>
        <el-scrollbar style="height: 138px">
          <div
            v-for="(subitem, subindex) in tableList[item.index]"
            :key="subindex"
            class="grid-range-row"
            @click="openDetail(subitem)"
          >
            <div class="row-index">{{ subindex + 1 }}</div>
            <div class="col">
              {{
                subitem.address
                  ? subitem.address
                  : subitem.fwzl
                  ? subitem.fwzl
                  : subitem.wqFwzl
              }}
            </div>
          </div>
        </el-scrollbar>
      </div>
      <el-scrollbar v-if="!secondType" style="height: 348px">
        <div
          v-for="(subitem, subindex) in tableList1"
          :key="subindex"
          class="grid-range-row"
          @click="openDetail(subitem)"
        >
          <div class="row-index">{{ subindex + 1 }}</div>
          <div class="col">
            {{ subitem.xmdz || subitem.fwzl }}
          </div>
        </div>
      </el-scrollbar>
      <el-pagination
        background
        :current-page="pageNumber"
        @current-change="pageChange"
        layout="prev, pager, next"
        :total="total"
        class="dialog-pagination"
      >
      </el-pagination>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePaenl from "./CBase.vue";
import {
  getZlqyInfo,
  getJjjgInfo,
  getHouseRentList,
  getHousePublishList,
  getSupportHouseList,
  getTenancyContractList,
  getProjectList,
  getGridmanHousePublish,
} from "@/assets/modules/service";

@Component({
  name: "floorSite",
  components: {
    BasePaenl,
  },
})
export default class extends Vue {
  get floorSiteData() {
    return this.$store.getters["panelData/floorSiteData"];
  }
  get title() {
    return this.floorSiteData.name;
  }
  get secondType() {
    return this.floorSiteData.children;
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  get gridmanSfid() {
    return this.$store.getters["panelData/gridmanSfid"];
  }
  tableList: any[] = [];
  tableList1: any[] = [];
  tableList2: any[] = [];
  activeDialogType: any = "";
  searchVal = "";
  openDetailUrl = "";
  pageNumber: any = 1;
  openFlowDetailUrl = "";
  activeProjectType: any = "";
  total: any = 0;
  mounted() {
    const win: any = window;
    this.openDetailUrl = win.user.openDetailUrl;
    this.openFlowDetailUrl = win.user.openFlowDetailUrl;
    this.tableList1 = [];
    this.tableList2 = [];
    this.tableList = [this.tableList1, this.tableList2];
    this.searchFloorName();
  }
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
  // 租赁企业数
  getZlqyInfo() {
    this.activeDialogType = "zlqy";
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
      page: this.pageNumber,
      pageSize: 10,
    };
    getZlqyInfo(data).then((res: any) => {
      if (res?.data) {
        this.tableList1 = res.data.reportList.records;
        this.tableList2 = res.data.gatherList.records;
        this.tableList = [this.tableList1, this.tableList2];
        this.total =
          res.data.reportList.total > res.data.gatherList.total
            ? res.data.reportList.total
            : res.data.gatherList.total;
      }
    });
  }
  // 经纪机构数
  getJjjgInfo() {
    this.activeDialogType = "jjjg";
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
      page: this.pageNumber,
      pageSize: 10,
    };
    getJjjgInfo(data).then((res: any) => {
      if (res?.data) {
        this.tableList1 = res.data.filingsList.records;
        this.tableList2 = res.data.gatherList.records;
        this.tableList = [this.tableList1, this.tableList2];
        this.total =
          res.data.filingsList.total > res.data.gatherList.total
            ? res.data.filingsList.total
            : res.data.gatherList.total;
      }
    });
  }
  // 租赁房源入统数
  getHouseRentList() {
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
    };
    getHouseRentList(data).then((res: any) => {
      if (res?.data) {
        this.tableList1 = res.data.hysList;
        this.tableList2 = res.data.cjsList;
        this.tableList = [this.tableList1, this.tableList2];
      }
    });
  }
  // 房源发布数
  getHousePublishList() {
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
    };
    getHousePublishList(data).then((res: any) => {
      if (res?.data) {
        this.tableList1 = res.data.hysList;
        this.tableList2 = res.data.cjsList;
        this.tableList = [this.tableList1, this.tableList2];
      }
    });
  }
  // 保障性住房数
  getSupportHouseList() {
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
    };
    getSupportHouseList(data).then((res: any) => {
      if (res?.data) {
        this.tableList1 = res.data;
      }
    });
  }
  // 租赁合同
  getTenancyContractList() {
    this.activeDialogType = "zlht";
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
      page: this.pageNumber,
      pageSize: 10,
    };
    getTenancyContractList(data).then((res: any) => {
      debugger;
      if (res?.data) {
        this.tableList1 = res.data.lsljhtList.records;
        this.tableList2 = res.data.xyyxhtList.records;
        this.tableList = [this.tableList1, this.tableList2];
        this.total =
          res.data.lsljhtList.total > res.data.xyyxhtList.total
            ? res.data.lsljhtList.total
            : res.data.xyyxhtList.total;
      }
    });
  }
  // 项目信息
  getProjectList(type: any) {
    this.activeDialogType = "xmxx";
    this.activeProjectType = type;
    const data: any = {
      geoJson: this.areaData.geoJson,
      site: this.searchVal,
      type: type,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList,
      page: this.pageNumber,
      pageSize: 10,
    };
    getProjectList(data).then((res: any) => {
      if (res?.data) {
        debugger;
        this.tableList1 = res.data.records;
        this.total = res.data.total;
      }
    });
  }
  // 房源发布数
  getGridmanHousePublish() {
    const data: any = {
      sfid: this.gridmanSfid,
      sszl: this.searchVal,
    };
    getGridmanHousePublish(data).then((res: any) => {
      if (res?.data) {
        this.tableList1 = res.data;
      }
    });
  }
  searchFloorName() {
    this.tableList1 = [];
    this.tableList2 = [];
    this.tableList = [this.tableList1, this.tableList2];
    this.pageNumber = 1;
    switch (this.floorSiteData.name) {
      case "租赁企业数":
        this.getZlqyInfo();
        break;
      case "经纪机构数":
        this.getJjjgInfo();
        break;
      case "租赁房源入统数":
        this.getHouseRentList();
        break;
      case "房源发布数":
        this.getHousePublishList();
        break;
      case "保障性住房数":
        this.getSupportHouseList();
        break;
      case "租赁项目数":
        this.getProjectList("zlxm");
        break;
      case "保障性租赁住房项目数":
        this.getProjectList("bzxzlzf");
        break;
      case "中央财补项目数":
        this.getProjectList("zycb");
        break;
      case "房源发布审核数":
        this.getGridmanHousePublish();
        break;
      case "租赁合同":
        this.getTenancyContractList();
        break;
    }
  }
  pageChange(number: any) {
    this.pageNumber = number;
    switch (this.activeDialogType) {
      case "zlqy":
        this.getZlqyInfo();
        break;
      case "jjjg":
        this.getJjjgInfo();
        break;
      case "xmxx":
        this.getProjectList(this.activeProjectType);
        break;
      case "zlht":
        this.getTenancyContractList();
        break;
    }
  }
  openDetail(item: any) {
    if (this.floorSiteData.name == "租赁企业数") {
      const url =
        this.openDetailUrl +
        "id=1674369296526131201&formDataSfid=" +
        item.sfid +
        "&showType=readonly&ywid=" +
        item.ywid +
        "&tyshxydm=" +
        item.tyshxydm;
      window.open(url);
    } else if (this.floorSiteData.name == "经纪机构数") {
      const url =
        this.openDetailUrl +
        "id=1679050199068209153&formDataSfid=" +
        item.sfid +
        "&showType=readonly&ywid=" +
        item.ywid +
        "&creditCode=" +
        item.tyshxydm;
      window.open(url);
    } else if (
      this.floorSiteData.name == "租赁项目数" ||
      this.floorSiteData.name == "保障性租赁住房项目数" ||
      this.floorSiteData.name == "中央财补项目数"
    ) {
      const url =
        this.openDetailUrl +
        "id=1684144339808333825&formDataSfid=" +
        item.sfid +
        "&showType=readonly&ssxmid=" +
        item.ywid +
        "&relateYwid=" +
        item.ywid +
        "&ywid=" +
        item.ywid;
      window.open(url);
    } else if (
      this.floorSiteData.name == "租赁房源入统数" ||
      this.floorSiteData.name == "房源发布数" ||
      this.floorSiteData.name == "保障性住房数"
    ) {
      const url =
        this.openDetailUrl +
        "id=1678959582577537026&fwzl=" +
        item.fwzl +
        "&bzdz=" +
        item.fwzl +
        "&formDataSfid=" +
        item.sfid +
        "&showType=readonly&sfid=" +
        item.ssxmid +
        "&fwbm=" +
        item.fwbm +
        "&relateYwid=" +
        item.ywid +
        "&ywid=" +
        item.ywid +
        "&ccdx=house";
      window.open(url);
    } else if (this.floorSiteData.name == "房源发布审核数") {
      const url =
        this.openFlowDetailUrl +
        "aclRole=DONE&flowInstSfId=" +
        item.flowInstSfid +
        "&taskInstSfId=" +
        item.taskInstSfid;
      window.open(url);
    } else if (this.floorSiteData.name == "租赁合同") {
      // const url =
      //   this.openFlowDetailUrl +
      //   "aclRole=OVER&flowInstSfId=" +
      //   item.flowInstSfid +
      //   "&taskInstSfId=" +
      //   item.taskInstSfid;
      const url =
        this.openDetailUrl +
        "id=1777893379379200002&formDataSfid=" +
        item.covenantId +
        "&showType=readonly";
      window.open(url);
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 505px;
  height: 520px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-3.png);
  background-size: 100% 100%;
}

.grid-range-row {
  width: 470px;
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  cursor: pointer;

  .row-index {
    width: 16px;
    height: 16px;
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 12px;
    color: #b4d8f7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background-image: url(../../assets/images/dialogs/tanchuangliebiaoxuhaotubiaobeijing.png);
    background-size: 100% 100%;
  }
}

.search {
  display: flex;
  font-family: AlibabaPuHuiTi_2_45_Light;
  font-size: 14px;
  line-height: 30px;
  color: #ffffff;

  .search-input {
    width: 320px;
    margin: 0 10px;
  }

  .search-btn {
    width: 78px;
    height: 28px;
    background-image: url(../../assets/images/dialogs/chaxunanniu-qian.png);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
<style lang="scss">
.search {
  .el-input__inner:hover {
    border-color: #1658a0;
  }

  .el-input__inner {
    background-color: #001022;
    border: 1px solid #1658a0;
    color: #fff;
    font-family: AlibabaPuHuiTi_2_45_Light;
    font-size: 14px;
    color: #ffffff;
  }
}
.dialog-pagination {
  margin-top: 10px;
}
.dialog-pagination .el-pager li {
  background-color: #00243e !important;
  border: #0f5aa6 solid 1px;
  color: #ffffff !important;
  border-radius: 8px !important;
  &.active {
    background-color: #007af8 !important;
  }
}
.dialog-pagination button {
  background-color: #00243e !important;
  border: #0f5aa6 solid 1px;
  color: #ffffff !important;
  border-radius: 8px !important;
}
</style>
